<template>
  <Menu v-if="!isCollapsed" theme="dark" :open-names="openNames" :active-name="activeName" accordion style="width:100%" @on-select="handleClick">
    <Submenu v-for="(item,index) in parentMenus" :key="index" :name="item.id">
      <template #title>
        <Icon :type="item.icon" size="16"/>{{item.menuName}}
      </template>
      <MenuItem v-for="(child,i) in applyMenusList[item.appcode]" :key="i"  :name="child.id">
        {{child.menuName}}
      </MenuItem>
    </Submenu>
  </Menu>
  <Menu v-else theme="dark" style="width:100%">
    <MenuItem v-for="(item,index) in parentMenus" :key="index" :name="item.id">
      <Dropdown placement="right" transfer transfer-class-name="transfer-class-name" @on-click="checkMenu">
        <Icon :type="item.icon" size="18"/>
        <template #list>
          <DropdownMenu>
            <DropdownItem v-for="(child,i) in applyMenusList[item.appcode]" :key="i"  :name="child.id">{{child.menuName}}</DropdownItem>
          </DropdownMenu>
        </template>
      </Dropdown>
    </MenuItem>
  </Menu>
</template>

<script>
import MenuData from '@/utils/MenuData.json'
export default {
  name: 'Menus',
  props: {
    isCollapsed: {
      type: Boolean,
      default: true
    },
  },
  setup() {

  },
  data () {
      return {
          parentMenus: MenuData.applysList,
          applyMenusList: MenuData.applyMenusList,
          activeName:'',
          openNames:['1'],
          tabList:this.$store.state.tabList,
      }
  },
  created(){
    var path = this.$route.path
    if(path!='/'){
      this.toPath(path)
    }else{
      this.defaultMethod()
    }
  },
  watch:{
    '$store.state.tabList'(val){
      if(val.length>0){
        this.tabList = val;
      }
    }
  },
  methods: {
    defaultMethod(){
      //默认打开第一个菜单
      this.tabList = []
      var menu = this.applyMenusList[this.parentMenus[0].appcode][0];
      if(!this.tabList.includes(menu)){
        this.tabList.push(menu)
      }
      this.$router.push({path:menu.menuLink})
      this.$store.commit('setMenuId', menu.id)
      this.$store.commit('setTabList', this.tabList)
      this.$store.commit('setTabActive', menu.id)
      this.$store.commit('setTabIndex', 0)
    },
    toPath(path){
      this.openNames = []
      this.parentMenus.forEach(menu => {
        menu.children = this.applyMenusList[menu.appcode]
        menu.children.forEach(child => {
          if(child.menuLink===path){
            var index = this.tabList.findIndex(ele => ele.id === child.id)
            if(index==-1){
              this.tabList.push(child)
              this.$store.commit('setTabList', this.tabList)
            }
            this.$store.commit('setTabActive', child.id)
            this.$store.commit('setTabIndex', this.tabList.findIndex(ele => ele.id === child.id))
            this.activeName = child.id
            this.openNames.push(menu.id)
            if(this.$store.state.menuId!=child.id){
              this.$store.commit('setMenuId', child.id)
            }
          }
        });
      });
      this.$store.commit('setMenuList', this.parentMenus)
    },
    handleClick(name) {
      var p = name.substring(0,name.indexOf('-'));
      this.parentMenus.forEach(menu => {
        if(menu.id===p){
          this.applyMenusList[menu.appcode].forEach(child => {
            if(child.id===name){
              var index = this.tabList.findIndex(ele => ele.id === child.id)
              if(index==-1){
                this.tabList.push(child)
                this.$store.commit('setTabList', this.tabList)
              }
              this.activeName = child.id
              this.$store.commit('setTabActive', child.id)
              this.$store.commit('setTabIndex', this.tabList.findIndex(ele => ele.id === child.id))
              this.$store.commit('setMenuId', child.id)
              this.$router.push({path:child.menuLink})
            }
          });
        }
      });
    },
    checkMenu(name){
      this.parentMenus.forEach(menu => {
        this.applyMenusList[menu.appcode].forEach(child => {
          if(child.id===name){
            var index = this.tabList.findIndex(ele => ele.id === child.id)
            if(index==-1){
              this.tabList.push(child)
              this.$store.commit('setTabList', this.tabList)
            }
            this.activeName = child.id
            this.$store.commit('setTabActive', child.id)
            this.$store.commit('setTabIndex', this.tabList.findIndex(ele => ele.id === child.id))
            this.$store.commit('setMenuId', child.id)
            this.$router.push({path:child.menuLink})
          }
        });
      });
    },
  }
}
</script>
<style>
.transfer-class-name{
  left: 80px!important;
}
.i-layout-menu-side .ivu-menu-item, .i-layout-menu-side .ivu-menu-submenu-title {
    height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>